<template>
  <div>
    <set-header :text="text" :title="title" :choose-color="chooseColor" :last-color="lastColor"></set-header>
      <div class="body">
        <div class="body-box">
          <!--photo部分-->
          <div class="photo box-info">
            <div class="box-title floatLeft">Profile photo</div>
            <div class="box-message photo-message floatLeft">
              <span class="choose block"><a>Choose an image from your computer</a></span>
              <span class="size">JPEG,PNG,GIF, or BMP.50MB file limit</span>
            </div>
            <div class="clear"></div>
          </div>
          <!--name部分-->
          <div class="name box-info">
            <div class="box-title floatLeft">Name</div>
            <div class="box-message name-message floatLeft">
             <input type="text" value="Sun He"/>
              <span class="block">Heads up: Once you launch a project, you cannot make changes to your name on Kickstarter.</span>
            </div>
            <div class="clear"></div>
          </div>
          <!--connect部分-->
          <div class="connect box-info">
            <div class="box-title floatLeft">Facebook Connect</div>
            <div class="box-message connect-message floatLeft">
               <span class="lineBlock">Connected to Facebook</span>
               <span class="lineBlock"><a>disconnect</a></span>
            </div>
            <div class="clear"></div>
          </div>
          <!--blography部分-->
          <div class="blography box-info">
            <div class="box-title floatLeft">Biography</div>
            <div class="box-message blography-message floatLeft">
              <input type="text"/>
            </div>
            <div class="clear"></div>
          </div>
          <!--location部分-->
          <div class="location box-info">
            <div class="box-title floatLeft">Your location</div>
            <div class="box-message location-message floatLeft">
              <input type="text" value="Fremont, CA"/>
            </div>
            <div class="clear"></div>
          </div>
          <!--websites-->
          <div class="websites box-info">
            <div class="box-title floatLeft">Websites</div>
            <div class="box-message websites-message floatLeft">
              <input type="text"/><button>Add</button>
              <span class="block">Some suggestions: Link to your blog, portfolio, Twitter, Instagram, etc.</span>
            </div>
            <div class="clear"></div>
          </div>
          <!--Analytics部分-->
          <div class="analytics box-info">
            <div class="box-title floatLeft">Google Analytics</div>
            <div class="box-message analytics-message floatLeft">
              <input type="text" placeholder="UA-XXXXXXXX-X"/>
              <span class="block">Enter your trackingID to enable Google analytics for your project. <a>Check out our FAQ for more info.</a></span>
            </div>
            <div class="clear"></div>
          </div>
          <!--文本部分-->
          <div class="text">
            <span class="text-title block">Inportant notes on accountability</span>
            <span class="text-txt block">Part of every creator’s job is earning their backer’s trust, especially backers who don’t personally know them. It’s up to you to make the case that you can successfully bring your project to life. Present your qualifications and share links that help reinforce them.</span>
            <span class="text-title block">Inportant notes on accountability</span>
            <span class="text-txt block">Part of every creator’s job is earning their backer’s trust, especially backers who don’t personally know them. It’s up to you to make the case that you can successfully bring your project to life. Present your qualifications and share links that help reinforce them to link to any previous projects in your bio.</span>
          </div>

        </div>
      </div>
    <set-footer></set-footer>
  </div>

</template>

<script>
  import setHeader from '../public/SetHeader'
  import setFooter from '../public/SetFooter'

    export default {
        name: "about-you",
        components:{ setHeader, setFooter },
        data(){
            return{
                text:'Add a bio and links to your website and social media profiles. Think of it as your creative resume.',
                title:'Tell us more about yourself.',
                chooseColor:[ false, false, false, true, false ],
                lastColor:[ '', '', '', '', '' ]
            }
        }
    }
</script>

<style scoped lang="scss">
  input{outline: none}
.clear{clear: both}
.block{display: block}
.lineBlock{display: inline-block}
.floatLeft{float: left}
.body{
  background-color:#DBDEDD;
}
  .body-box{
    width: 930px;
    background: #FFFFFF;
    border: 1px solid #DBDEDD;
    margin: 0 auto;
    padding: 22px 0 0 26px;
    box-sizing: border-box;
    .box-info{
      background: #F8F9FD;
      margin-bottom: 22px;
      width: 640px;
    }
    .box-title{
      width: 185px;
      box-sizing: border-box;
      padding: 16px 0 0 13px;
      font-size: 12px;
      color: #2E2E2E;
      font-family: Arial-BoldMT;
      letter-spacing: 0.4px;
    }
    .photo{
      height: 125px;
      .choose{
        margin: 4px 0 7px 0;
        width: 450px;
        line-height: 80px;
        text-align: center;
        background: #FFFFFF;
        border: 1px dashed #596EE1;
        border-radius: 6px;
        a{
          font-size: 14px;
          color: #2C59F6;
          font-family: Arial-BoldMT;
          letter-spacing: -0.8px;
        }
      }
      .size{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.4px;
        line-height: 18px;
      }
    }
    .name-message{
      input{
        margin: 3px 0 9px 0;
        width: 450px;
        height: 40px;
        padding-left: 11px;
        box-sizing: border-box;
        font-family: ArialMT;
        font-size: 14px;
        color: #2E2E2E;
        letter-spacing: 0;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0;
        line-height: 16px;
        padding-bottom: 15px;
        width: 450px;
      }
    }
    .connect-message{
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        margin: 15px 0 17px 0;
        a{color: #2C59F6;}
      }
      span:nth-child(1){padding:0 9px 0 35px;}
    }
    .blography-message{
      input{
        width:450px;
        height:150px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        margin: 3px 0 5px 0;
      }
    }
    .location-message{
      input{
        border: 1px solid #B0C1FB;
        border-radius: 6px;
        width: 450px;
        height: 40px;
        padding-left:13px;
        font-family: ArialMT;
        font-size: 14px;
        color: #2C59F6;
        letter-spacing: 0.2px;
        box-sizing: border-box;
        margin: 3px 0;
      }
    }
    .websites-message{
      padding: 5px 0 16px 0;
      input{
        border: 1px solid #DBDEDD;
        width: 320px;
        height: 40px;
      }
      button{
        outline: none;
        border: none;
        background: #2C59F6;
        width: 70px;
        height: 38px;
        margin-left: 4px;
        font-family: Arial-BoldMT;
        font-size: 14px;
        color: #FFFFFF;
      }
      span{
        margin-top:15px;
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
      }
    }
    .analytics-message{
      width: 449px;
      input{
        padding-left: 12px;
        box-sizing: border-box;
        width: 449px;
        height: 40px;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 16px;
        margin: 7px 0;
        a{ color: #2C59F6 }
      }
    }
    .text{
      padding: 872px 0 21px 0;
      width: 223px;
      color: #2E2E2E;
      font-family: ArialMT;
      .text-title{
        font-size: 14px;
        letter-spacing: -0.4px;
        margin-bottom: 10px;
      }
      .text-txt{
        margin-bottom: 21px;
        font-size: 12px;
        letter-spacing: 0.2px;
        line-height: 17px;
      }
    }
  }

</style>
